<template>
    <div class="head">
      
      <video src="https://lf3-static.bytednsdoc.com/obj/eden-cn/bfhpqbt/pc_background_moon.mp4" controls autoplay muted="" loop="" playsinline="" preload="auto"></video>
      <h2>今日头条</h2>
        <div class="search">
            <input type="text" placeholder="请输入内容">
            <button>搜索</button>
        </div>
        <p>热搜：<span>江苏舜天被证监会立案</span> <span>勇士不敌鹈鹕</span> <span>第14届中国航展开幕在即</span> </p>
    </div>
</template>

<script>
export default {
   data () {
        

        return {}
    }
}
</script>

<style scoped>
     
     .head{
        width:1000px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        /* background:url(./img/pic1.jpg) no-repeat ; */
        /* background-size: 1000px 400px; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }
     .head video{
      /* width:1000px;
        height: 400px; */
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
     }
     .head h2{
      position: absolute;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 40px;
      font-weight: 800;
      margin-bottom: 20px;
     }
     .search{
      position: absolute;

        width:650px;
        height: 40px;
        border-radius: 10px;
        background-color: red;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
     }
     
     .search input{
        width:580px;
        height: 40px;
        /* margin-left: 2px; */
        padding-left: 8px;
        box-sizing: border-box;
        outline: none;
        border: 0;
     }
     .search button{
        width:70px;
        height: 40px;
        box-sizing: border-box;
        /* outline: none; */
        border: 0;
        background-color: red;
         
     }
     .head p{
      width: 600PX;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: rgb(219, 223, 223);
     }
     .head p span{
      margin-right: 5px;
     }
     .head p span:hover{
      color: rgb(171, 173, 175);
   }

</style>